<template>
    <div class="top">
        <a-avatar shape="circle" :src="userInfo.avatar" :size="70" />

        <h3>身份:
            <span v-if="userInfo.identify == 1">普通用户</span>
            <span v-if="userInfo.identify == 0">管理员</span>
        </h3>
        <h3>
            用户名：<span>{{ userInfo.userName }}</span>
        </h3>
    </div>
    <div class="center">
        <a-form layout="horizontal" :model="userInfo">

            <a-form-item label="昵称">
                <a-input v-model:value="userInfo.nickName" placeholder="请输入昵称" />
            </a-form-item>

            <a-form-item label="手机">
                <a-input v-model:value="userInfo.phone" readonly />
            </a-form-item>

            <a-form-item label="邮箱">
                <a-input v-model:value="userInfo.email" placeholder="请输入昵称" />
            </a-form-item>

            <a-form-item label="年龄">
                <a-input-number v-model:value="userInfo.age" />
            </a-form-item>

            <a-form-item label="性别">
                <a-radio-group v-model:value="userInfo.gender">
                    <a-radio value="m">男</a-radio>
                    <a-radio value="w">女</a-radio>
                </a-radio-group>
            </a-form-item>

            <a-form-item :wrapper-col="{ span: 14, offset: 4 }">
                <a-button type="primary" @click="updateInfo">修改信息</a-button>
            </a-form-item>
        </a-form>
    </div>
</template>

<script setup>
import { reactive } from "vue";
import {useUserStore} from "@/store/UserInfo.js"
const userStore = useUserStore();

const userInfo = userStore.userInfo

const updateInfo = () => {
    console.log(userInfo);
}

</script>

<style scoped>
.top {
    display: flex;
    gap: 15px;
}

.top>h3 {
    margin-top: 20px;
}

span {
    color: #4cccb5;
}

.center {
    margin-top: 30px;
    width: 40%;
    padding: 5px;
}
</style>